<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Textarea - Autogrow</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>

    <style>
      ion-list ion-textarea {
        margin: 20px 0 0 0;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Textarea - Autogrow</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-textarea auto-grow="true" label="Autogrow"></ion-textarea>

          <ion-textarea
            fill="outline"
            label-placement="stacked"
            auto-grow="true"
            label="Autogrow w/ stacked label"
          ></ion-textarea>

          <ion-textarea
            fill="outline"
            label-placement="floating"
            auto-grow="true"
            label="Autogrow w/ floating label"
          ></ion-textarea>
        </ion-list>
      </ion-content>
    </ion-app>

    <script>
      const textareas = document.querySelectorAll('ion-textarea');
      textareas.forEach((textarea) => {
        textarea.value = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at rhoncus diam. Suspendisse lobortis dolor sit amet euismod ultrices. Nam accumsan fringilla quam. Aliquam erat volutpat. Suspendisse vel nisl orci. Nunc placerat metus id elit viverra, vel ultricies felis accumsan. Nullam aliquet vel turpis et iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.`;
      });
    </script>
  </body>
</html>
